<template>
	<!-- 新增 -->
	<el-dialog
		title="新增"
		:visible.sync="dialog"
		width="450px">
		<!-- 内容 -->
		<el-form
			:model="ruleForm"
			:rules="rules"
			ref="ruleForm"
			label-width="70px"
			class="new">
			<div class="group">
				<el-form-item label="姓名" prop="name">
					<el-input v-model="ruleForm.name"></el-input>
				</el-form-item>
				<el-form-item label="班级" prop="class">
					<el-select
						v-model="ruleForm.class" 
						placeholder="请选择班级"
						style="width:100%"
						clearable>
						<el-option
							v-for="item in list_class"
							:key="item.class_id"
							:label="item.class_name"
							:value="item.class_id">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="性别" prop="sex">
					<el-select
						v-model="ruleForm.sex" 
						placeholder="请选择班级"
						style="width:100%">
						<el-option
							v-for="item in list_sex"
							:key="item"
							:label="item"
							:value="item">
						</el-option>
					</el-select>
				</el-form-item>
			</div>
		</el-form>
		<!-- 提交 -->
		<div class="flex flex-end">
			<div class="btn">
				<el-button
					@click="dialog = false"
					size="small">取消
				</el-button>
			</div>
			<div class="btn">
				<el-button
					type="primary"
					@click="submit()"
					size="small">确定
				</el-button>
			</div>
		</div>
	</el-dialog>
</template>

<script>
export default {
	props:["ifShow"],
	watch:{
		ifShow(val){
			this.dialog = true;
			this.getClass();
		}
	},
	data() {
		return {
			dialog:false,
			list_class:[],
			list_sex:['男','女'],
			ruleForm:{
				name:"",
				class:'',
				sex:'男'
			},
			rules:{
				name:[
					{
						required: true,
						message: '不能为空',
						trigger: 'blur' ,
					},
					{
						max: 20,
						message: '不能超过20个字符',
						trigger: 'blur' ,
					}
				],
				class:[
					{
						required: true,
						message: '不能为空',
						trigger: 'blur' ,
					},
				]
			}
		};
	},
	methods:{
		getClass(){
			this.$axios.get('/class/list')
			.then(res=>{
				if(res.code == 200){
					this.list_class = res.data;
				}
			})
		},
		submit(){
			this.$axios.post('/student/add',{
				studentName:this.ruleForm.name,
				classId:this.ruleForm.class,
				sex:this.ruleForm.sex
			})
			.then(res=>{
				if(res.code == 200){
					this.$message.success('操作成功');
					this.dialog = false;
					this.$emit('submit',true);
				}
			})
		}
	}
};
</script>

<style lang="scss" scoped>
	.new{
		padding: 0 20px 0 0;
	}
	.btn{
		margin-right: 20px;
	}
</style>
